<template>
  <s-modal title="添加" :visible="visible" width="1200px" :footer="null" @cancel="visible = false">
    <div style="height: 600px; width: 100%">
      <s-scroll style="width: 100%">
        <a-card style="width: 1152px">
          <s-tool-bar>
            <template #right>
              <s-button type="primary" icon="redo-outlined" @click="$refs.table.search(query)"
                >刷新</s-button
              >
            </template>
          </s-tool-bar>
          <div>
            <s-table
              ref="table"
              :pageable="false"
              :init-param="query"
              :pull-on-create="false"
              :scroll="{ y: 400 }"
              bordered
              :columns="columns"
              url="/authority/activeUser/list"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'action'">
                  <a
                    v-if="authorize.shotOffActiveUser"
                    style="margin-right: 8px"
                    @click="$refs.forceDownLine.open(record.id)"
                  >
                    <s-icon type="delete-outlined" />强制下线
                  </a>
                </template>
              </template>
            </s-table>
          </div>
        </a-card>
        <force-downline
          ref="forceDownLine"
          @success="
            () => {
              $refs.table.refresh()
            }
          "
        />
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
const columns = [
  {
    title: '会话编号',
    dataIndex: 'id',
    width: 300,
    ellipsis: true
  },
  {
    title: 'IP',
    dataIndex: 'host',
    ellipsis: true,
    width: 200
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    ellipsis: true,
    width: 300
  },
  {
    title: '最后访问时间',
    dataIndex: 'lastAccessTime',
    ellipsis: true,
    width: 300
  },
  {
    title: '到期时间',
    dataIndex: 'expireTime',
    ellipsis: true,
    width: 300
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'action',
    width: 150
  }
]
import ForceDownline from './forceDownline/index.vue'
export default {
  name: 'ActiveUser',
  components: { ForceDownline },
  data() {
    return {
      query: {},
      visible: false,
      columns: columns
    }
  },
  authorize: '/authority/activeUser/permissionList',
  methods: {
    open(id) {
      this.query.userId = id
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped></style>
